<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="username" placeholder="请输入用户名" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="password1" placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="phone" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码" gutter="20">
            <el-col :span="12">
              <el-input v-model="code" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="11" :offset="offset">
              <img :src="'http://127.0.0.1:8000/image_code?uuid='+uuid" style="width:100%;height:40px;" />
            </el-col>
          </el-form-item>
          <el-form-item label>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button>登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {guuid} from "../utils/uuid.js";

export default {
  data() {
    return {
      offset:1,
      username: "Tom",
      password: "123456",
      password1: "123456",
      email: "tom@126.com",
      phone:"19099988877",
      code: "3333",
      uuid: guuid(),
    };
  },
  methods:{
      register(){
          const data={
              "username":this.username,
              "password":this.password,
              "email":this.email,
              "phone":this.phone,
              "code":this.code,
              "uuid":this.uuid,
          };
          this.axios.post("/reg",data).then(resp=>{
              console.log(resp.data);

             if(resp.data.status===200){
                 this.$message({
                     "message":resp.data.msg,
                     "type":"success"
                 })
             }else{
                 
                 this.$message.error(resp.data.msg)
             }

          }).catch(error=>{
              console.log(error)
          })
      },
  }
};
</script>

<style>
</style>
